<template>
  <el-header>
    <el-row class="me-header">

      <el-col  :span="24">
        <el-menu :router=true menu-trigger="click" active-text-color="#5FB878" :default-active="activeIndex"
                 mode="horizontal">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/WordPage">记单词</el-menu-item>
          <el-menu-item index="/CloseList">完形填空</el-menu-item>
          <el-menu-item index="/ManagePage/Exams">考试管理</el-menu-item>
          <el-menu-item index="/UserPage">用户信息</el-menu-item>
        </el-menu>
      </el-col>

      <!-- <el-col :span="2">
        <el-menu :router=true menu-trigger="click" mode="horizontal" active-text-color="#5FB878">
          <template>
            <el-menu-item index="/login">
              <el-button type="text">登录</el-button>
            </el-menu-item>
            <el-menu-item >
              <el-button type="text" @click="logout">退出</el-button>
            </el-menu-item>
          </template>
        </el-menu>
      </el-col> -->
    </el-row>
  </el-header>
</template>

<script>
  export default {
    name: 'BaseHeader',
    props: { activeIndex: String},
    data() {
      return {
        logined: false
      }
    },
    computed: {
      user() {
        // let login = this.$store.state.account.length != 0
        // let avatar = this.$store.state.avatar
        let login = "970524265"
        let avatar = "https://blog.csdn.net/favicon.ico"
        return { login, avatar }
      }
    },
    methods: {
      
    }
  }
</script>

<style>
  .el-header{
    position: fixed;
    z-index: 1024;
    width: 100%;
    left: 0; top: 0;
    height: 61px;
    background: white;
  }
  .me-title {
    margin-top: 10px;
    font-size: 24px;
  }

  .me-header-left {
    margin-top: 10px;
  }

  .me-title img {
    max-height: 2.4rem;
    max-width: 100%;
    background: w;
  }

  .me-header-picture {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
  }
</style>
